<template>
  <div class="createKey">
    <h3 class="title">密钥生成</h3>
        <el-row>
            <el-button type="primary" @click="getKeyData('zuc')">ZUC</el-button>
            <el-button type="primary" @click="getKeyData('sm2')">SM2</el-button>
            <el-button type="primary" @click="getKeyData('sm4')">SM4</el-button>
        </el-row>

         <el-dialog
            title="生成的密钥"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span v-if="key3 != ''">密钥：{{key3}}</span><br>
            <span v-if="key1 != ''">公钥：{{key1}}</span><br>
            <span v-if="key2 != ''">私钥：{{key2}}</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
 import userRequest from "../request/user";
export default {
  data() {
    return {
      dialogVisible: false, 
      showComp: true, 
      type: '',
      key1: "",//公钥
      key2: "", // 私钥
      key3: ""
    };
  },

  methods: {
      // 关闭对话框
    clearComp() {
      this.dialogVisible = false;
      this.showComp = false;
    },


    getKeyData(type){
      console.log(type)
      var that = this
      userRequest
      .getKey(({
              type: type,
            })) 
            .then((res) => {
                if(res.data.success){
                this.dialogVisible = true
                this.showComp = true
              if(type == 'sm2'){
                that.key1 = res.data.result['publicKey']
                that.key2 = res.data.result['privateKey']
                that.key3 = ''
              }else{
                that.key3 = res.data.result
                that.key2 = ''
                that.key1 = ''
              }
          }
               
      })
  }   
},

  created() {}
};
</script>

<style lang="scss" scoped>
.createKey {
  overflow: hidden;

  ::v-deep .title {
    margin: 36px;
    text-align: center;
    font-size: 20px;
  }

  .el-row {
    text-align: center;
    box-sizing: border-box;
}

}
</style>